<script setup lang="ts">
import Home from './icons/Home.vue';
import User from './icons/User.vue';
import Perm from './icons/Perm.vue';
import Role from './icons/Role.vue';
import DeviceManage from './icons/device/DeviceManage.vue';
import DeviceInfo from './icons/device/DeviceInfo.vue';
import DeviceMaintain from './icons/device/DeviceMaintain.vue';
import DeviceThreshold from './icons/device/DeviceThreshold.vue';
import ClassManage from './icons/class/ClassManage.vue';
import AlarmManage from './icons/alarm/AlarmManage.vue';
import ClassInfo from './icons/class/ClassInfo.vue';
import DeviceData from './icons/device/DeviceData.vue';
import AlarmLog from './icons/alarm/AlarmLog.vue';
import MemberGroup from './icons/class/MemberGroup.vue';

const isCollapse = defineModel("isCollapse");

const handleOpen = () => {

}

const handleClose = () => {

}

</script>

<template>
    <div class="container">
        <el-menu :router="true" default-active="2"
            class="el-menu-vertical"
            active-text-color="#ffd04b"
            background-color="#263445"
            text-color="#fff"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-menu-item index="/" class="item">
                <el-icon><Home /></el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user" class="item">
                <el-icon><User /></el-icon>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/perm" class="item">
                <el-icon><Perm /></el-icon>
                <span>权限管理</span>
            </el-menu-item>
            <el-menu-item index="/role" class="item">
                <el-icon><Role /></el-icon>
                <span>角色管理</span>
            </el-menu-item>
            <el-sub-menu index="1" class="item">
                <template #title>
                    <el-icon><DeviceManage /></el-icon>
                    <span>设备管理</span>
                </template>
                <el-menu-item index="/device/info">
                    <el-icon><DeviceInfo /></el-icon>
                    <span>设备信息</span>
                </el-menu-item>
                <el-menu-item index="/device/maintain">
                    <el-icon><DeviceMaintain /></el-icon>
                    <span>设备维修</span>
                </el-menu-item>
                <el-menu-item index="/device/threshold">
                    <el-icon><DeviceThreshold /></el-icon>
                    <span>设备阈值</span>
                </el-menu-item>
                <el-menu-item index="/device/data">
                    <el-icon><DeviceData /></el-icon>
                    <span>设备数据</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2" class="item">
                <template #title>
                    <el-icon><ClassManage /></el-icon>
                    <span>班级管理</span>
                </template>
                <el-menu-item index="/class/info">
                    <el-icon><ClassInfo /></el-icon>
                    <span>班级信息</span>
                </el-menu-item>
                <el-menu-item index="/class/group">
                    <el-icon><MemberGroup /></el-icon>
                    <span>成员分组</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3" class="item">
                <template #title>
                    <el-icon><AlarmManage /></el-icon>
                    <span>告警管理</span>
                </template>
                <el-menu-item index="/alarm/log">
                    <el-icon><AlarmLog /></el-icon>
                    <span>告警日志</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    width: 100%;
    .el-menu-vertical {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        .item {
            width: 100%;
        }
    }
}

</style>